<template>
  <!-- 预约中心 -->
  <section class="reservecentre">
    <el-tabs v-model="tabsIndex" type="border-card">
      <el-tab-pane name="2" label="新增预约">
        <addReserve :qxBtns="qxBtns"></addReserve>
      </el-tab-pane>
      <el-tab-pane name="1" label="预约患者">
        <reservePatient v-if="tab1" :qxBtns="qxBtns" :tabPar="tabPar"></reservePatient>
      </el-tab-pane>
      <el-tab-pane name="0" label="日历">
        <reserveCalendar v-if="tab0" :qxBtns="qxBtns"></reserveCalendar>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>
<script>
export default {
  name: "reservecentre",
  components: {
    reserveCalendar: () => import("./reserveCalendar.vue"),
    addReserve: () => import("./addReserve.vue"),
    reservePatient: () => import("./reservePatient.vue")
  },
  data() {
    return {
      //查看详情的参数
      tabPar: {},
      tabsIndex: "2",
      qxBtns: {},
      tab1: false,
      tab0: false
    };
  },
  mounted() {
    let th = this;
    th.getQX();
    th.onInit();
    th.addPageCache("reservecentre");
  },
  activated() {
    const th = this;
    th.onInit();
  },
  methods: {
    onInit() {
      const th = this;
      let patientId = th.$route.query.patientId;
      if (patientId) {
        th.verifyUrlAttack(th.$route.query).then(() => {
          th.tabsIndex = "2";
        });
      }
      let tabIndex = th.$route.query.tabIndex;
      if (tabIndex) {
        th.tabsIndex = tabIndex;
      }
    }
  },
  watch: {
    tabsIndex(n) {
      const th=this;
      switch (n) {
        case "0":
          th.tab0=true;
          break; 
        case "1":
          th.tab1=true;
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.reservecentre {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  background-color: transparent !important;
}
</style>

